<template>
	<div class="wrap">
		<el-form
			ref="forms"
			size="small"
			:model="forms"
			:rules="rules"
			label-position="right"
			label-width="120px"
			class="custom-form"
		>
			<el-card shadow="never" :border="false">
				<div slot="header" class="info-tlt">基本信息</div>
				<el-form-item label="赛事名称：" prop="race_name">
					<el-input
						v-model="forms.race_name"
						placeholder="请输入赛事名称"
						clearable
						maxlength="30"
						show-word-limit
						style="width: 70%"
					/>
				</el-form-item>
				<el-form-item label="举办城市：" prop="provice_id">
					<el-row type="flex" align="center">
						<el-select
							v-model="forms.provice_id"
							placeholder="请选择省份"
							clearable
							filterable
							style="width: 250px"
							@change="
								forms.city_id = ''
								getColumn(forms.provice_id)
							"
						>
							<el-option
								v-for="item in columnOptions"
								:key="item.region_id"
								:label="item.region_name"
								:value="item.region_id"
							/>
						</el-select>
						<el-form-item label="" prop="city_id" label-width="10px" style="margin-bottom: 0">
							<el-select
								v-model="forms.city_id"
								placeholder="请选择城市"
								clearable
								filterable
								style="width: 250px"
							>
								<el-option
									v-for="item in cityOptions"
									:key="item.region_id"
									:label="item.region_name"
									:value="item.region_id"
								/>
							</el-select>
						</el-form-item>
					</el-row>
				</el-form-item>
				<el-row type="flex">
					<el-form-item label="报名开始时间：" prop="apply_start_time">
						<el-date-picker
							v-model="forms.apply_start_time"
							type="datetime"
							placeholder="请选择"
							value-format="yyyy-MM-dd HH:mm:ss"
							style="width: 250px"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="报名截止时间：" prop="apply_end_time" label-width="140px">
						<el-date-picker
							v-model="forms.apply_end_time"
							type="datetime"
							placeholder="请选择"
							value-format="yyyy-MM-dd HH:mm:ss"
							style="width: 250px"
						></el-date-picker>
					</el-form-item>
				</el-row>
				<el-row type="flex">
					<el-form-item label="赛事开始时间：" prop="race_start_time">
						<el-date-picker
							v-model="forms.race_start_time"
							type="datetime"
							placeholder="请选择"
							value-format="yyyy-MM-dd HH:mm:ss"
							style="width: 250px"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="赛事结束时间：" prop="race_end_time" label-width="140px">
						<el-date-picker
							v-model="forms.race_end_time"
							type="datetime"
							placeholder="请选择"
							value-format="yyyy-MM-dd HH:mm:ss"
							style="width: 250px"
						></el-date-picker>
					</el-form-item>
				</el-row>
				<el-form-item prop="race_focus_img" label="赛事轮播图：">
					<UploadImage
						ref="upload"
						:maxSize="2"
						@files="onUpload"
						:files="fileList"
						:imgWidth="694"
						:imgHeight="286"
						:limit="9"
					/>
				</el-form-item>
				<el-form-item prop="race_img" label="赛事首图：">
					<UploadImage
						ref="upload2"
						:maxSize="2"
						@files="onUpload2"
						:files="fileList2"
						:imgWidth="310"
						:imgHeight="254"
						:limit="1"
					/>
				</el-form-item>
				<el-form-item label="组别设置：" class="form-table" prop="groups">
					<div style="width: 100%">
						<el-button type="primary" plain @click="onEditGroup('add')">添加</el-button>
						<el-table
							style="margin-top: 10px"
							:data="forms.groups"
							stripe
							border
							highlight-current-row
							size="small"
							:cell-style="() => ({ textAlign: 'center' })"
							:header-cell-style="() => ({ textAlign: 'center' })"
						>
							<el-table-column
								label="组别编号"
								prop="group_id"
								min-width="100px"
								show-overflow-tooltip
							/>
							<el-table-column
								label="组别名称"
								prop="group_name"
								min-width="120px"
								show-overflow-tooltip
								align="center"
							/>
							<el-table-column
								label="报名截止时间"
								prop="apply_end_time"
								min-width="160px"
								show-overflow-tooltip
								align="center"
							/>
							<el-table-column
								label="支付金额"
								prop="pay_money"
								min-width="100px"
								show-overflow-tooltip
								align="center"
							/>
							<el-table-column
								label="赞助商折扣价"
								prop="discount_money"
								min-width="110"
								show-overflow-tooltip
								align="center"
							/>
							<el-table-column
								label="报名人数"
								prop="person_limit"
								min-width="100px"
								show-overflow-tooltip
								align="center"
							/>
							<el-table-column
								label="是否亲子跑"
								min-width="100px"
								show-overflow-tooltip
								:formatter="row => (row.is_children === 1 ? '是' : '否')"
							/>
							<el-table-column
								label="共享分组id"
								prop="share_id"
								min-width="100"
								show-overflow-tooltip
								align="center"
							/>
							<el-table-column label="操作" width="100" fixed="right">
								<template slot-scope="scope">
									<el-button
										type="text"
										:underline="false"
										@click="onEditGroup('edit', scope.row)"
										v-prevent-click="2000"
									>
										修改
									</el-button>
									<el-button
										type="text"
										:underline="false"
										@click="onDelete(scope.row, scope.$index)"
										v-prevent-click="2000"
									>
										删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" :border="false" style="margin-top: 10px">
				<div slot="header" class="info-tlt">注意事项</div>
				<el-form-item
					label="是否阅读事项："
					prop="is_read"
					style="margin-bottom: 8px"
					label-width="150px"
				>
					<el-radio-group v-model="forms.is_read">
						<el-radio :label="1">需阅读</el-radio>
						<el-radio :label="0">无需阅读</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="注意事项内容："
					prop="read_content"
					v-if="forms.is_read == 1"
					key="editor"
					label-width="150px"
				>
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor"
							v-model="forms.read_content"
							@input="richInput($event, 'read_content')"
						/>
					</div>
				</el-form-item>
				<el-form-item
					label="是否阅读事项2："
					prop="is_read2"
					style="margin-bottom: 8px"
					label-width="150px"
				>
					<el-radio-group v-model="forms.is_read2">
						<el-radio :label="1">需阅读</el-radio>
						<el-radio :label="0">无需阅读</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="注意事项内容2："
					prop="read_content2"
					v-if="forms.is_read2 == 1"
					key="editor2"
					label-width="150px"
				>
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor2"
							v-model="forms.read_content2"
							@input="richInput($event, 'read_content2')"
						/>
					</div>
				</el-form-item>
				<el-form-item
					label="是否阅读事项3："
					prop="is_read3"
					style="margin-bottom: 8px"
					label-width="150px"
				>
					<el-radio-group v-model="forms.is_read3">
						<el-radio :label="1">需阅读</el-radio>
						<el-radio :label="0">无需阅读</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="注意事项内容3："
					prop="read_content3"
					v-if="forms.is_read3 == 1"
					key="editor3"
					label-width="150px"
				>
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor3"
							v-model="forms.read_content3"
							@input="richInput($event, 'read_content3')"
						/>
					</div>
				</el-form-item>
				<el-form-item
					label="是否阅读事项4："
					prop="is_read4"
					style="margin-bottom: 8px"
					label-width="150px"
				>
					<el-radio-group v-model="forms.is_read4">
						<el-radio :label="1">需阅读</el-radio>
						<el-radio :label="0">无需阅读</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="注意事项内容4："
					prop="read_content4"
					v-if="forms.is_read4 == 1"
					key="editor4"
					label-width="150px"
				>
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor4"
							v-model="forms.read_content4"
							@input="richInput($event, 'read_content4')"
						/>
					</div>
				</el-form-item>
				<el-form-item
					label="是否阅读事项5："
					prop="is_read5"
					style="margin-bottom: 8px"
					label-width="150px"
				>
					<el-radio-group v-model="forms.is_read5">
						<el-radio :label="1">需阅读</el-radio>
						<el-radio :label="0">无需阅读</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="注意事项内容5："
					prop="read_content5"
					v-if="forms.is_read5 == 1"
					key="editor5"
					label-width="150px"
				>
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor5"
							v-model="forms.read_content5"
							@input="richInput($event, 'read_content5')"
						/>
					</div>
				</el-form-item>
				<el-form-item
					label="是否阅读事项6："
					prop="is_read6"
					style="margin-bottom: 8px"
					label-width="150px"
				>
					<el-radio-group v-model="forms.is_read6">
						<el-radio :label="1">需阅读</el-radio>
						<el-radio :label="0">无需阅读</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="注意事项内容6："
					prop="read_content6"
					v-if="forms.is_read6 == 1"
					key="editor6"
					label-width="150px"
				>
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor6"
							v-model="forms.read_content6"
							@input="richInput($event, 'read_content6')"
						/>
					</div>
				</el-form-item>
				<el-form-item
					label="是否阅读事项7："
					prop="is_read7"
					style="margin-bottom: 8px"
					label-width="150px"
				>
					<el-radio-group v-model="forms.is_read7">
						<el-radio :label="1">需阅读</el-radio>
						<el-radio :label="0">无需阅读</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="注意事项内容7："
					prop="read_content"
					v-if="forms.is_read7 == 1"
					key="editor7"
					label-width="150px"
				>
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor7"
							v-model="forms.read_content7"
							@input="richInput($event, 'read_content7')"
						/>
					</div>
				</el-form-item>
				<el-form-item
					label="是否需参赛者签字："
					prop="is_sign"
					label-width="150px"
					style="margin-bottom: 8px"
				>
					<el-radio-group v-model="forms.is_sign">
						<el-radio :label="1">需签字</el-radio>
						<el-radio :label="0">无需签字</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="是否需参赛者答题："
					prop="is_questions"
					label-width="150px"
					style="margin-bottom: 8px"
				>
					<el-radio-group v-model="forms.is_questions">
						<el-radio :label="1">需答题</el-radio>
						<el-radio :label="0">无需答题</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-card>
			<el-card shadow="never" :border="false" style="margin-top: 10px">
				<div slot="header" class="info-tlt">活动介绍</div>
				<el-form-item label="活动内容：" prop="race_info" key="editorActive">
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor"
							v-model="forms.race_info"
							@input="richInput($event, 'race_info')"
						/>
					</div>
				</el-form-item>
				<!-- <el-form-item
					label="摇号规则："
					prop="compete_rule"
					style="margin-bottom: 8px"
					label-width="140px"
				>
					<el-radio-group v-model="forms.compete_rule">
						<el-radio :label="1">无需摇号</el-radio>
						<el-radio :label="2">先付费后摇号</el-radio>
						<el-radio :label="3">先摇号后付费</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="赛事状态："
					prop="race_status"
					style="margin-bottom: 8px"
					label-width="140px"
				>
					<el-radio-group v-model="forms.race_status">
						<el-radio :label="1">进行中</el-radio>
						<el-radio :label="2">已报满</el-radio>
						<el-radio :label="3">停止报名</el-radio>
						<el-radio :label="4">已结束</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<el-form-item
					label="是否热门："
					prop="is_hot"
					style="margin-bottom: 8px"
					label-width="140px"
				>
					<el-radio-group v-model="forms.is_hot">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="是否上架："
					prop="is_online"
					style="margin-bottom: 8px"
					label-width="140px"
				>
					<el-radio-group v-model="forms.is_online">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item
					label="是否显示退款按钮："
					prop="is_show_refund"
					style="margin-bottom: 8px"
					label-width="140px"
				>
					<el-radio-group v-model="forms.is_show_refund">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="订单失效时间：" prop="cancel_order_time" label-width="140px">
					<el-select
						v-model="forms.cancel_order_time"
						placeholder="请选择订单失效时间"
						style="width: 350px"
					>
						<el-option label="10分钟" :value="10" />
						<el-option label="15分钟" :value="15" />
						<el-option label="20分钟" :value="20" />
						<el-option label="25分钟" :value="25" />
						<el-option label="30分钟" :value="30" />
						<el-option label="40分钟" :value="40" />
						<el-option label="50分钟" :value="50" />
						<el-option label="60分钟" :value="60" />
					</el-select>
				</el-form-item>
			</el-card>
			<el-card shadow="never" :border="false" style="margin-top: 10px">
				<div slot="header" class="info-tlt">报名须知</div>
				<el-form-item label="报名须知内容：" prop="race_remind" key="editorSign">
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor"
							v-model="forms.race_remind"
							@input="richInput($event, 'race_remind')"
						/>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" :border="false" style="margin-top: 10px">
				<div slot="header" class="info-tlt">竞赛规程</div>
				<el-form-item label="竞赛规程内容：" prop="race_rule">
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor"
							v-model="forms.race_rule"
							@input="richInput($event, 'race_rule')"
						/>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" :border="false" style="margin-top: 10px">
				<div slot="header" class="info-tlt">路线图</div>
				<el-form-item label="路线图：" prop="race_line" label-width="140px">
					<div class="section-content" style="min-height: 100px; width: 85%">
						<Editor
							ref="editor"
							v-model="forms.race_line"
							@input="richInput($event, 'race_line')"
						/>
					</div>
				</el-form-item>
				<el-form-item
					label="是否需要摆渡车："
					prop="is_free_trans"
					style="margin-bottom: 8px"
					label-width="140px"
				>
					<el-radio-group v-model="forms.is_free_trans">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="摆渡车城市：" prop="free_trans_city" label-width="140px">
					<el-select
						v-model="forms.free_trans_city"
						placeholder="请选择城市"
						clearable
						filterable
						multiple
						:collapse-tags="true"
						style="width: 100%"
					>
						<el-option
							v-for="item in cityOptions"
							:key="item.region_id"
							:label="item.region_name"
							:value="item.region_id"
						/>
					</el-select>
				</el-form-item>
			</el-card>
			<el-card shadow="never" :border="false" style="margin-top: 10px">
				<div slot="header" class="info-tlt">证书信息</div>
				<el-form-item prop="race_cert_bg" label="竞赛证书模板：">
					<UploadImage
						ref="upload3"
						:maxSize="5"
						@files="onUpload3"
						:files="fileList3"
						:limit="1"
					/>
				</el-form-item>
				<el-form-item prop="race_bg" label="赛事背景图：">
					<UploadImage
						ref="upload4"
						:maxSize="5"
						@files="onUpload4"
						:files="fileList4"
						:limit="1"
						:imgWidth="750"
					/>
				</el-form-item>
				<el-form-item prop="race_color" label="赛事色调：">
					<el-input
						v-model="forms.race_color"
						placeholder="请输入赛事色调"
						clearable
						style="width: 350px"
					/>
				</el-form-item>
			</el-card>
			<el-card shadow="never" :border="false" style="margin-top: 10px">
				<div slot="header" class="info-tlt">其他信息</div>
				<el-form-item prop="h5_address" label="h5图片地址：">
					<el-input
						v-model="forms.h5_address"
						placeholder="请输入照片地址"
						clearable
						style="width: 80%"
					/>
				</el-form-item>
				<el-form-item prop="share_poster" label="海报背景图：">
					<UploadImage
						ref="uploadPoster"
						:maxSize="5"
						@files="onUploadPoster"
						:files="fileListPoster"
						:limit="1"
					/>
				</el-form-item>
			</el-card>
		</el-form>
		<el-row type="flex" justify="center" style="width: 100%; margin: 12px 0">
			<el-button size="small" style="margin-right: 5px; width: 70px" @click="$router.back()">
				返回
			</el-button>
			<el-button
				type="primary"
				size="small"
				@click="saveVideos"
				style="width: 100px"
				v-prevent-click="2000"
			>
				保存
			</el-button>
		</el-row>
		<AddGroup ref="group" @update="updateGroup" :groupOptions="groupOptions"></AddGroup>
	</div>
</template>
<script>
	import UploadImage from '@/components/UploadHttp/UploadImage.vue'
	import AddGroup from './components/add.vue'
	import Editor from '@/components/Editor'
	import { uploadFunc } from '@/utils/upload.js'
	import {
		addRace,
		editRace,
		getInfo,
		regionLists,
		delRaceGroup
	} from '@/api/competition-manage.js'
	export default {
		name: 'CreateCompetition',
		components: { UploadImage, Editor, AddGroup },
		data() {
			return {
				disabled: false,
				forms: {
					race_name: '',
					city_id: '',
					race_start_time: '',
					race_end_time: '',
					apply_start_time: '',
					apply_end_time: '',
					race_focus_img: '',
					race_status: 1,
					compete_rule: 0,
					race_remind: '',
					race_line: '',
					race_rule: '',
					race_img: [],
					race_focus_img: [],
					is_read: 1,
					is_questions: 0,
					is_sign: 0,
					read_content: '',
					is_hot: 0,
					is_online: 1,
					is_free_trans: 0,
					free_trans_city: [],
					groups: [],
					race_cert_bg: '',
					race_color: '',
					race_bg: '',
					is_show_refund: 0,
					cancel_order_time: 30,
					is_read2: 1,
					read_content2: '',
					is_read3: 1,
					read_content3: '',
					is_read4: 1,
					read_content4: '',
					is_read5: 1,
					read_content5: '',
					is_read6: 1,
					read_content6: '',
					is_read7: 1,
					read_content7: '',
					share_poster: ''
				},
				rules: {
					race_name: [{ required: true, message: '请输入赛事名称', trigger: 'blur' }],
					provice_id: [{ required: true, message: '请选择省份', trigger: 'change' }],
					city_id: [{ required: true, message: '请选择城市', trigger: 'change' }],
					race_info: [{ required: true, message: '请输入活动介绍', trigger: 'blur' }],
					read_content: [{ required: true, message: '请输入注意事项内容', trigger: 'blur' }],
					race_remind: [{ required: true, message: '请输入报名须知内容', trigger: 'blur' }],
					race_start_time: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
					race_end_time: [{ required: true, message: '请选择赛事结束时间', trigger: 'change' }],
					apply_start_time: [{ required: true, message: '请选择报名开始时间', trigger: 'change' }],
					apply_end_time: [{ required: true, message: '请选择报名截止时间', trigger: 'change' }],
					race_focus_img: [
						{ type: 'array', required: true, message: '请添加赛事轮播图', trigger: 'change' }
					],
					race_img: [
						{ type: 'array', required: true, message: '请添加赛事首图', trigger: 'change' }
					],
					groups: [{ type: 'array', required: true, message: '请添加组别', trigger: 'change' }]
				},
				fileList: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				cityOptions: [],
				columnOptions: [],
				groupOptions: [],
				fileListPoster: []
			}
		},
		async created() {
			const { id } = this.$route.query
			document.title = this.$route.meta.title = id ? '编辑赛事' : '创建赛事'
			if (id) {
				this.getDetailInfo(id)
			} else {
				this.getColumn()
			}
		},
		methods: {
			async getColumn(parent) {
				try {
					const res = await regionLists({ region_parent: parent || 0 })
					if (parent) {
						this.cityOptions = res.data
					} else {
						this.columnOptions = res.data
					}
				} catch (err) {
					console.log(err)
				}
			},
			async getDetailInfo(race_id) {
				const loading = this.$setLoading()
				try {
					await this.getColumn()
					const { data } = await getInfo({ race_id })

					if (data.city_region) {
						const [province, city] = data.city_region.split('-')
						const arr = this.columnOptions.filter(item => item.region_name == province)
						data.provice_id = arr.length ? arr[0].region_id : ''

						await this.getColumn(data.provice_id)
						const arr2 = this.cityOptions.filter(item => item.region_name == city)
						data.city_id = arr2.length ? arr2[0].region_id : ''
					}
					data.free_trans_city = data.free_trans_city.map(item => Number(item))
					data.race_img = this.fileList2 = data.race_img ? [{ url: data.race_img }] : []
					data.race_focus_img = this.fileList = data.race_focus_img
						? data.race_focus_img.map(item => ({ url: item }))
						: []
					data.race_bg = this.fileList4 = data.race_bg ? [{ url: data.race_bg }] : []
					data.race_cert_bg = this.fileList3 = data.race_cert_bg ? [{ url: data.race_cert_bg }] : []
					data.share_poster = this.fileListPoster = data.share_poster
						? [{ url: data.share_poster }]
						: []

					this.forms = data

					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			async saveVideos() {
				this.$refs.forms.validate(async valid => {
					if (valid) {
						const loading = this.$setLoading({
							lock: true,
							text: '数据提交中~'
						})
						const func1 = uploadFunc(this.fileList)
						const func2 = uploadFunc(this.fileList2)
						const func3 = uploadFunc(this.fileList3)
						const func4 = uploadFunc(this.fileList4)
						const func5 = uploadFunc(this.fileListPoster)
						Promise.all([func1, func2, func3, func4, func5]).then(() => {
							this.saveData(loading)
						})
					} else {
						this.$message.warning('请完善信息后提交！')
					}
				})
			},
			// 保存更新进度数据
			async saveData(loading) {
				const {
					forms: { race_img, race_focus_img, provice_id, groups, ...params },
					fileList,
					fileList2,
					fileList3,
					fileList4,
					fileListPoster
				} = this
				const provice_info = this.columnOptions.filter(item => item.region_id === provice_id)
				const city_info = this.cityOptions.filter(item => item.region_id === params.city_id)
				params.race_img = fileList2.map(item => item.url).join(',')
				params.race_focus_img = fileList.map(item => item.url)
				params.city_region = `${provice_info.length ? provice_info[0].region_name : provice_id}-${
					city_info.length > 0 ? city_info[0].region_name : params.city_id
				}`

				params.group_ids = groups.map(item => item.group_id)
				params.race_cert_bg = fileList3.map(item => item.url).join(',')
				params.race_bg = fileList4.map(item => item.url).join(',')
				params.share_poster = fileListPoster.map(item => item.url).join(',')

				const func = params.race_id ? editRace(params) : addRace(params)
				Promise.all([func])
					.then(res => {
						this.$message.success(`${params.focus_id ? '修改' : '新增'}赛事信息成功！`)
						this.$router.back()
					})
					.finally(() => loading.close())
			},
			onUpload(list) {
				this.fileList = list
				this.forms.race_focus_img = list || []
				this.$refs.forms.validateField('race_focus_img')
			},
			onUpload2(list) {
				this.fileList2 = list
				this.forms.race_img = list || []
				this.$refs.forms.validateField('race_img')
			},
			onUpload3(list) {
				this.fileList3 = list
			},
			onUpload4(list) {
				this.fileList4 = list
			},
			onUploadPoster(list) {
				this.fileListPoster = list
			},
			richInput(val, valueName) {
				if (val) {
					this.$refs.forms.clearValidate([valueName])
				} else {
					this.$refs.forms.validateField([valueName])
				}
			},
			onDelete(row, index) {
				this.$confirm('删除后不可恢复，确定删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					dangerouslyUseHTMLString: true,
					type: 'warning'
				})
					.then(async () => {
						this.$message.success(`删除成功！`)
						this.forms.groups.splice(index, 1)
						// const loading = this.$setLoading()
						// try {
						//   delRaceGroup({ group_id: row.group_id }).then(res => {
						//   	this.$message.success(`删除成功！`)
						//   	this.forms.groups.splice(index, 1)
						//   })
						//   loading.close()
						// } catch (e) {
						//   console.log(e)
						//   loading.close()
						// }
					})
					.catch(() => {})
			},
			updateGroup(type, data) {
				if (type === 'add') {
					this.forms.groups.push(data)
					this.$refs.forms.clearValidate('groups')
				} else {
					const index = this.forms.groups.findIndex(item => item.group_id === data.group_id)
					this.$set(this.forms.groups, index, data)
				}
			},
			onEditGroup(type, row = {}) {
				this.$refs.group.initData(type, row)
				const list = JSON.parse(JSON.stringify(this.forms.groups))
				this.groupOptions = list.filter(item => item.group_id !== row.group_id)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		.info-tlt {
			line-height: 20px;

			&:before {
				content: '';
				float: left;
				width: 4px;
				height: 18px;
				background-color: #37a6e5;
				margin-right: 10px;
			}
		}

		::v-deep {
			.custom-form .el-card__body {
				width: 95%;
				margin: 0 auto;
			}

			.form-table .el-form-item__content {
				line-height: 0;
			}

			.el-form-item__content {
				min-height: auto;
			}

			.el-form .el-form-item {
				margin-bottom: 18px;
			}

			.el-radio-group {
				margin-top: 8px;
			}

			.upload-demo .el-upload {
				overflow: hidden;
			}

			.el-upload__tip {
				margin: 0;
			}

			.picBox,
			.upload-img {
				width: 347px !important;
				height: 143px !important;
				line-height: 143px !important;
			}
		}
	}
</style>